<script setup>
import { computed, inject } from 'vue'

const isSmallPage = inject('isSmallPage')
const props = defineProps({
  bottom: {
    type: Number,
    default: 50,
  },
})

const bottom = computed(() => props.bottom + (isSmallPage.value ? 50 : 0))
</script>
<template>
  <div class="float-button-group" :style="{ bottom: `${bottom}px` }">
    <slot></slot>
  </div>
</template>

<style scoped>
.float-button-group {
  @apply fixed bottom-20 sm:bottom-8 right-5 z-10 w-12 mx-auto flex flex-col space-y-3;
}
</style>
